<script setup lang="ts">
import { Volume } from "@/views/domain/kubeHud/api/k8s/types";
import KDescGroup from "../../components/KDescGroup.vue";
import KDescRow from "../../components/KDescRow.vue";
import InTagLine from "../../components/InTagLine.vue";
import { objectToYaml } from "@/views/domain/kubeHud/utils";
import VueCodemirror from "codemirror-editor-vue3";

type Prop = {
  volumes?: Volume[];
};

const props = defineProps<Prop>();
</script>

<template>
  <div class="volume-wrapper">
    <KDescGroup v-for="volume in props.volumes" :key="volume.name">
      <KDescRow
        :label="volume.name"
        :style="{ fontSize: '18px', fontWeight: 'bold' }"
      />
      <KDescRow label="Source" :content="volume.name" />
      <!-- HOST -->
      <div v-if="volume.hostPath">
        <KDescRow label="Kind" content="hostPath" />
        <KDescRow label="Path" :content="volume.hostPath.path" />
      </div>
      <!-- PVC -->
      <div v-else-if="volume.persistentVolumeClaim">
        <KDescRow label="Kind" content="persistentVolumeClaim" />
        <KDescRow
          label="PersistentVolumeClaim"
          :content="volume.persistentVolumeClaim.claimName"
        />
      </div>
      <!-- ConfigMap -->
      <div v-else-if="volume.configMap">
        <KDescRow label="Kind" content="configMap" />
        <KDescRow label="ConfigMap" :content="volume.configMap.name" />
      </div>
      <!-- Project -->
      <div v-else-if="volume.projected">
        <KDescRow label="Kind" content="projected" />
        <KDescRow label="Sources">
          <!-- {{ objectToYaml(volume) }} -->
          <VueCodemirror
            :value="objectToYaml(volume)"
            :options="{ mode: 'yaml' }"
          />
        </KDescRow>
      </div>
      <!-- Secret -->
      <div v-else-if="volume.secret">
        <KDescRow label="Kind" content="secret" />
        <KDescRow label="Secret" :content="volume.secret.secretName" />
      </div>
    </KDescGroup>
  </div>
</template>
<style lang="scss" scoped>
.volume-wrapper {
  display: flex;
  gap: 12px;
  flex-direction: column;

  .el-table {
    border-radius: 12px;
    overflow: hidden;
    --el-table-header-bg-color: var(--el-color-primary-dark-1);
    --el-table-header-text-color: var(--el-border-color-lighter);
  }
}
</style>
